<template>
  <div>
    <div class="pl-3 pr-3">
      <el-row :gutter="10" class="mt-3 items-center justify-center">
        <el-col :span="6" class="cursor-pointer">
          <img src="../assets/navsmall.jpg" style="width: 60px">
          <div class="text-center" style="font-size: 10px">商品分类</div>
        </el-col>
        <el-col :span="6" class="cursor-pointer">
          <img src="../assets/huismall.jpg" style="width: 60px">
          <div class="text-center" style="font-size: 10px">大聚惠</div>
        </el-col>
        <el-col :span="6" class="cursor-pointer">
          <img src="../assets/mansmall.jpg" style="width: 60px">
          <div class="text-center" style="font-size: 10px">优惠信息</div>
        </el-col>
        <el-col :span="6" class="cursor-pointer">
          <img src="../assets/moneysmall.jpg" style="width: 60px">
          <div class="text-center" style="font-size: 10px">投资理财</div>
        </el-col>
      </el-row>
      <el-row class="mt-3">
        <el-col :span="5" style="font-size: 10px">商城头条</el-col>
        <el-col :span="16" :offset="3" class="font-bold cursor-pointer" style="font-size: 10px">[特惠]商城爆品1分钟</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">真的有鱼</div>
          <div class=" text-center" style="font-size: 11px">开年福利篇</div>
          <img src="../assets/tj.png">
        </el-col>
        <el-col :span="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">囤货过冬</div>
          <div class=" text-center" style="font-size: 11px">让爱早回家</div>
          <img src="../assets/tj1.png">
        </el-col>
        <el-col :span="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">浪漫情人节</div>
          <div class=" text-center" style="font-size: 11px">甜甜蜜蜜</div>
          <img src="../assets/tj2.png">
        </el-col>
      </el-row>
    </div>
    <div class="h-10 leading-10 text-center" style="font-size: 15px;background-color: #eeeeee">
      活动
    </div>
    <div class="pl-3 pr-3">
      <el-row :gutter="2">
        <el-col :span="6">
          <div class="relative">
            <img src="../assets/activity1.jpg">
            <div class="absolute left-0 top-0 trangle-1"></div>
            <div class="absolute left-1 top-1 text-white" style="font-size: 1px">秒杀</div>
            <div class="text-center" style="font-size: 10px">春节送礼优选</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="relative">
            <img src="../assets/activity2.jpg">
            <div class="absolute left-0 top-0 trangle-2"></div>
            <div class="absolute left-1 top-1 text-white" style="font-size: 1px">秒杀</div>
            <div class="text-center" style="font-size: 10px">春节送礼优选</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="relative">
            <img src="../assets/activity3.jpg">
            <div class="absolute left-0 top-0 trangle-3"></div>
            <div class="absolute left-1 top-1 text-white" style="font-size: 1px">秒杀</div>
            <div class="text-center" style="font-size: 10px">春节送礼优选</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="relative">
            <img src="../assets/activity.jpg">
            <div class="absolute left-0 top-0 trangle-4"></div>
            <div class="absolute left-1 top-1 text-white" style="font-size: 1px">秒杀</div>
            <div class="text-center" style="font-size: 10px">春节送礼优选</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="h-10 leading-10 text-center" style="font-size: 15px;background-color: #eeeeee">
      手机
    </div>
    <div class="ml-1 mr-1">
      <el-row >
        <el-col @click="goToDetails" :span="10" class="cursor-pointer border-r border-solid border-b pr-1" style="border-color: #eee">
          <div class="text-myRed-one text-center" style="font-size: 10px">免费领30天碎屏险</div>
          <div class="text-center" style="font-size: 10px">颜值之星，双摄之王</div>
          <img src="../assets/tel.png">
        </el-col>
        <el-col :span="14" @click="goToDetails" class="cursor-pointer">
          <div>
            <el-row class="justify-between">
              <el-col :span="12">
                <div class="text-myRed-one" style="font-size: 10px">荣耀10</div>
                <div style="font-size: 8px">￥5888.00</div>
              </el-col>
              <el-col :offset="3" :span="9">
                <img src="../assets/tel.png">
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <div class="text-center text-myRed-one" style="font-size: 10px">一加手机</div>
                <div class="text-center" style="font-size: 9px">￥2499.00</div>
                <img src="../assets/phone2.jpg">
              </el-col>
              <el-col :span="12">
                <div class="text-center text-myRed-one" style="font-size: 10px">一加手机</div>
                <div class="text-center" style="font-size: 9px">￥2499.00</div>
                <img src="../assets/phone5.jpg">
              </el-col>
              <el-col :span="12">
                <div class="text-center text-myRed-one" style="font-size: 10px">一加手机</div>
                <div class="text-center" style="font-size: 9px">￥2499.00</div>
                <img src="../assets/phone5.jpg">
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row @click="goToDetails" class="cursor-pointer">
        <el-col :span="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">苹果4s手机</div>
          <div class="text-center" style="font-size: 9px">￥2099.00</div>
          <img src="../assets/phone4.jpg">
        </el-col>
        <el-col :span="8" :offset="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">魅族 魅蓝</div>
          <div class="text-center" style="font-size: 9px">￥999.00</div>
          <img src="../assets/phone4.jpg">
        </el-col>
      </el-row>
    </div>
    <div class="h-10 leading-10 text-center" style="font-size: 15px;background-color: #eeeeee">
      电脑
    </div>
    <div class="ml-1 mr-1 cursor-pointer" @click="goToDetails">
      <el-row >
        <el-col :span="10" class="border-r border-solid border-b pr-1" style="border-color: #eee">
          <div class="text-myRed-one text-center" style="font-size: 10px">致敬2016</div>
          <div class="text-center" style="font-size: 10px">新春大礼包</div>
          <img src="../assets/computerArt.png">
        </el-col>
        <el-col :span="14" class="">
          <div>
            <el-row class="justify-between">
              <el-col :span="12">
                <div class="text-myRed-one" style="font-size: 10px">惠普（HP）笔记本</div>
                <div style="font-size: 8px">￥5888.00</div>
              </el-col>
              <el-col :offset="3" :span="9">
                <img src="../assets/computer1.jpg">
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <div class="text-myRed-one" style="font-size: 10px">罗技蓝牙键盘</div>
                <div style="font-size: 9px">￥2499.00</div>

              </el-col>
              <el-col :span="12">
                <img src="../assets/computer2.jpg">
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <div class="text-center text-myRed-one" style="font-size: 10px">米奇U盘</div>
                <div class="text-center" style="font-size: 9px">￥39.00</div>
                <img src="../assets/computer3.jpg">
              </el-col>
              <el-col :span="12">
                <div class="text-center text-myRed-one" style="font-size: 10px">优派液晶显示器</div>
                <div class="text-center" style="font-size: 9px">￥699.00</div>
                <img src="../assets/computer4.jpg">
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">联想笔记本</div>
          <div class="text-center" style="font-size: 9px">￥6599.00</div>
          <img src="../assets/computer5.jpg">
        </el-col>
        <el-col :span="8" :offset="8">
          <div class="text-myRed-one text-center" style="font-size: 10px">LG 航拍器</div>
          <div class="text-center" style="font-size: 9px">￥699.00</div>
          <img src="../assets/computer6.jpg">
        </el-col>
      </el-row>
    </div>
    <div class="h-10 leading-10 text-center" style="font-size: 15px;background-color: #eeeeee">
      甜品
    </div>
    <div class="ml-1 mr-1 cursor-pointer" @click="goToDetails">
      <el-row>
        <el-col :span="8" style="border-color: #eee" class="pl-1 pr-1 border-solid border-r border-b">
          <div class="text-center text-myRed-one" style="font-size: 10px">零食大礼包开枪啦</div>
          <div class="text-center" style="font-size: 10px">当小鱼儿恋上软豆腐</div>
          <img src="../assets/act1.png">
        </el-col>
        <el-col :span="16" class="pl-2 pr-2">
          <el-row>
            <el-col :span="12">
              <div class="text-myRed-one" style="font-size: 10px">雪之恋和风大福</div>
              <div style="font-size: 10px">￥13.8</div>
            </el-col>
            <el-col :span="12">
              <img src="../assets/1.jpg">
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
              <div class="text-center" style="font-size: 10px">￥4.8</div>
              <img src="../assets/2.jpg">
            </el-col>
            <el-col :span="12">
              <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
              <div class="text-center" style="font-size: 10px">￥4.8</div>
              <img src="../assets/2.jpg">
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="border-solid border-r" style="border-color: #eee">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/2.jpg">
        </el-col>
        <el-col :span="8">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/2.jpg">
        </el-col>
        <el-col :span="8">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/2.jpg">
        </el-col>

      </el-row>
    </div>
    <div class="h-10 leading-10 text-center" style="font-size: 15px;background-color: #eeeeee">
      坚果
    </div>
    <div class="ml-1 mr-1 cursor-pointer" @click="goToDetails">
      <el-row>
        <el-col :span="8" style="border-color: #eee" class="pl-1 pr-1 border-solid border-r border-b">
          <div class="text-center text-myRed-one" style="font-size: 10px">开枪啦</div>
          <div class="text-center" style="font-size: 10px">零食大礼包</div>
          <img src="../assets/act1.png">
        </el-col>
        <el-col :span="16" class="pl-2 pr-2">
          <el-row>
            <el-col :span="12">
              <div class="text-myRed-one" style="font-size: 10px">雪之恋和风大福</div>
              <div style="font-size: 10px">￥13.8</div>
            </el-col>
            <el-col :span="12">
              <img src="../assets/6.jpg">
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="text-myRed-one" style="font-size: 10px">雪之恋和风大福</div>
              <div style="font-size: 10px">￥13.8</div>
            </el-col>
            <el-col :span="12">
              <img src="../assets/7.jpg">
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="border-solid border-r" style="border-color: #eee">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/10.jpg">
        </el-col>
        <el-col :span="6">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/9.jpg">
        </el-col>
        <el-col :span="6">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/8.jpg">
        </el-col>
        <el-col :span="6" class="border-solid border-r" style="border-color: #eee">
          <div class="text-center text-myRed-one" style="font-size: 10px">小优布丁</div>
          <div class="text-center" style="font-size: 10px">￥4.8</div>
          <img src="../assets/10.jpg">
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
const $router = useRouter();
function goToDetails(){
  $router.push({
    name: 'mDetail'
  })
}
</script>

<style scoped>
.trangle-1 {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: #9b0d5f transparent transparent #9b0d5f;
}
.trangle-2 {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: #b48c66 transparent transparent #b48c66;
}
.trangle-3 {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: #7fb113 transparent transparent #7fb113;
}
.trangle-4 {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: #0087e5 transparent transparent #0087e5;
}
</style>